<template>
  <div>
    <Heads title="我的订单" :right-flag="false"></Heads>

    <van-tabs v-model="activeName" animated swipeable sticky>
      <!-- all -->
      <van-tab title="全部" name="all">
        <div v-if="Array.isArray(aOrder) && aOrder.length > 0">
          <order-item @view-details="viewDetails" :list="aOrder"></order-item>
        </div>
        <van-empty v-else description="暂无订单" />
      </van-tab>
      <!-- 0 -->
      <!-- <van-tab title="待支付" name="topaid">
        <div v-if="orderType(0).length > 0">
          <order-item @modify-order="modifyOrder" :list="orderType(0)"></order-item>
        </div>
        <van-empty v-else description="暂无订单" />
      </van-tab>-->
      <!-- 1 -->
      <van-tab title="待收货" name="toreceived">
        <div v-if="orderType(1).length > 0">
          <order-item @view-details="viewDetails" :list="orderType(1)"></order-item>
        </div>
        <van-empty v-else description="暂无订单" />
      </van-tab>
      <!-- 2 已确认收货,可评价 -->
      <van-tab title="待评价" name="topaid">
        <div v-if="orderType(2).length > 0">
          <order-item @view-details="viewDetails" :list="orderType(2)"></order-item>
        </div>
        <van-empty v-else description="暂无订单" />
      </van-tab>
      <!-- 3 -->
      <van-tab title="评价" name="evaluate">
        <div v-if="orderType(3).length > 0">
          <order-item @view-details="viewDetails" :list="orderType(3)"></order-item>
        </div>
        <van-empty v-else description="暂无订单" />
      </van-tab>
    </van-tabs>

    <!-- 自定义图标-弹出层 -->
    <van-popup
      v-model="popupOfDetail"
      :style="{ height: '400px', textAlign: 'left' }"
      closeable
      round
      close-icon="close"
      position="bottom"
    >
      <div class="pop-details-mt">
        <van-collapse v-model="activeNames">
          <van-collapse-item v-if="oDetails.type===0" title="交易关闭原因" name="0">因交易过期而关闭</van-collapse-item>
          <van-collapse-item
            title="地址"
            name="1"
          >{{oDetails.address ?oDetails.address.address:"未设置地址" }}</van-collapse-item>
          <van-collapse-item
            title="付款方式"
            name="2"
          >{{oDetails.coupon?oDetails.coupon.name+': '+ oDetails.coupon.valueDesc+oDetails.coupon.unitDesc: '未付款' }}</van-collapse-item>
          <van-collapse-item v-if="oDetails.type===1" title="物流信息" name="3">
            <van-steps direction="vertical" :active="oDetails.logistics.length-1">
              <van-step v-for="(log, i) in oDetails.logistics" :key="i">
                <h3>{{ log.text }}</h3>
                <p>{{ log.time | orderTimeFilter }}</p>
              </van-step>
            </van-steps>
          </van-collapse-item>
          <van-collapse-item v-if="oDetails.type===3" title="你的评价" name="4">{{oDetails.evaluate}}</van-collapse-item>
        </van-collapse>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters, mapActions } from "vuex";
// import { post } from "@/utils/axios";
import OrderItem from "@/components/user/OrderItem.vue";
import Vue from "vue";
import { Tab, Tabs, Empty, Step, Steps, Collapse, CollapseItem } from "vant";

Vue.use(Tab)
  .use(Tabs)
  .use(Empty)
  .use(Step)
  .use(Steps)
  .use(Collapse)
  .use(CollapseItem);
export default {
  data() {
    return {
      // aOrder: null,// 优化,放入vuex缓存起来,优化性能,减少bug(存在data数据响应会出错-可能太多了)
      popupOfDetail: false,
      oDetails: {},
      // 弹出框内部的折叠面板
      activeNames: ["1"]
    };
  },
  components: {
    OrderItem
  },
  computed: {
    ...mapState("userModule", ["aOrder"]),
    // ...mapGetters("userModule", ["orderType"]),
    // van-tabs
    activeName: {
      get: function() {
        return this.$route.params.type;
      },
      set: function(newVal, oldVal) {
        // 计算属性的值主动修改
      }
    },
    orderType: ({ aOrder }) => type => {
      // console.log(aOrder)
      return (
        Array.isArray(aOrder) &&
        aOrder.length > 0 &&
        aOrder.filter(item => item.type === type)
      );
    }
  },
  methods: {
    ...mapMutations("footerModule", ["FOOTERSHOW"]),
    ...mapActions("userModule", ["GETORDERACTION"]),
    viewDetails(item) {
      this.popupOfDetail = true;
      this.oDetails = item;
    }
    // modifyOrder(obj) {
    //   this.aOrder = obj;
    // }
  },
  mounted() {
    this.FOOTERSHOW(false);
    // 获取全部订单
    this.GETORDERACTION();
  },
  destroyed() {
    this.FOOTERSHOW(true);
  }
};
</script>

<style>
.pop-details-mt {
  margin-top: 40px;
}
</style>